<template>
  <div class="box1">
   <h1>这是头部内容,count值{{count}}</h1>
    <h2>获取电影的长度是{{movieList.length}}</h2>
    <button @click="addCount">累加</button>
    <button @click="addCountN({n:3})">累加n</button>
    <button @click="addCountWait">延迟累加</button>
    <button @click="addCountNWait({n:5})">延迟累加n</button>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'
export default {
    name:'Header',
    //计算属性得到一个值,并监听
    computed:{
      ...mapState(['count','movieList'])
    },
    //点击事件函数的书写
    methods:{
      ...mapMutations(['addCount','addCountN']),

      ...mapActions(['addCountWait','addCountNWait'])
    }

}
</script>

<style>
.box1{
  text-align: center;
  background-color: rgb(166, 237, 175);
}
</style>